<template>
  <div class="main-card">
    <span class="upper-right-corner" v-show="course.isMix === 1">混合</span>
    <span class="upper-right-corner" v-show="course.isOffline === 1">线上</span>
    <div class="card-header" @click="intoClass" :style="{ backgroundImage: `url(${course.backgroundImage})` }">
      <p class="time">{{ courseTime }}</p>
      <h3 :title="course.courseName" class="name">{{ course.courseName }}</h3>
      <p :title="course.studyClass" class="classname">{{ course.studyClass }}</p>
      <div class="qrcode">
        <img src="../../assets/img/main/qrcode.png" alt="ha">
        <span class="code">加课码:{{ course.courseCode }}</span>
      </div>
    </div>
    <div class="card-content">
    </div>
    <div class="card-foot">
      <div class="left">
        <span class="res-person">负责人:{{ course.courseTeacher }}</span>
      </div>
      <div class="right">
        <div class="set-top" v-if="course.isTop === 1" @click="cancelTopping()">取消置顶</div>
        <div class="set-top" v-else @click="topping()">
          <img src="../../assets/img/main/backtop.png" alt="ha">置顶
        </div>
        <div class="three-point">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link"><i class="el-icon-more"></i> </span>
            <el-dropdown-menu>
              <el-dropdown-item command="a">退课</el-dropdown-item>
              <el-dropdown-item command="b">归档</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMix: '',
      Top: '',
      course: {
        courseName: this.card.courseName,
        studyClass: this.card.studyClass,
        isTop: this.card.isTop,
        isMix: this.card.isMix,
        courseTeacher: this.card.courseTeacher,
        courseNumber: this.card.courseNumber,
        courseCode: this.card.courseCode,
        isOffline: this.card.isOffline,
        backgroundImage: this.card.backgroundImage
      },
    }
  },
  methods: {
    handleCommand(command) {
      this.$message('click on item ' + command);
    },
    topping() {
      this.request.post('/topping', {
        courseCode: this.course.courseCode
      }).then((data) => {
        if (data === "置顶课程失败，数据库数据没有变化") {
          this.$message.error("置顶课程失败，数据库数据没有变化")
        } else if (data === "置顶课程成功") {
          this.$message({
            message: "置顶课程成功",
            type: "success"
          })
          this.$bus.$emit('topping', true)
          this.course.isTop = 1
        }
      })
    },
    cancelTopping() {
      this.request.post('/cancelTopping', {
        courseCode: this.course.courseCode
      }).then((data) => {
        if (data === "取消置顶课程失败，数据库数据没有变化") {
          this.$message.error("取消置顶课程失败，数据库数据没有变化")
        } else if (data === "取消置顶课程成功") {
          this.$message({
            message: "取消置顶课程成功",
            type: "success"
          })
          this.$bus.$emit('topping', true)
          this.course.isTop = 0
        }
      })
    },
    intoClass() {
      this.$bus.$emit('isinClass', true)
      this.$router.push({
        path: '/classDetail/courseContent',
        // query: {
        //   backgroundImage: this.card.backgroundImage,
        //   courseName: this.card.courseName,
        //   studyClass: this.card.studyClass,
        //   courseCode: this.card.courseCode,
        //   courseNumber: this.card.courseNumber
        // }
      })
      this.$store.commit("courseInformation/setCourseInformation", {
        backgroundImage: this.card.backgroundImage,
        courseName: this.card.courseName,
        studyClass: this.card.studyClass,
        courseCode: this.card.courseCode,
        courseNumber: this.card.courseNumber
      })
    },

  },
  props: ['card', 'courseTime'],
  create() {
    // this.imageUrl = "require('../../assets/img/course/0" + (Math.floor(Math.random() * 5) + 1) + ".jpg"
  },
  mounted() {
    // console.log(this.course.isTop)
    // if (this.card.isTop === '1') {
    //   this.Top = true;
    // } else if (this.card.isTop === '0') {
    //   this.Top = false;
    // }
    this.$bus.$on("cancelTopping", (data) => {
      if (data === this.course.courseCode) {
        // this.Top = false;
        this.course.isTop = 0
      }
    })
  },
  watch: {
    course(newValue) {
      console.log("课程数据" + JSON.stringify(newValue))
    }
  }
}
</script>

<style scoped>
.main-card {
  margin: 13px;
  width: 325px;
  height: 310px;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.upper-right-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  height: 35px;
  border-radius: 0 0 0 10px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  background: linear-gradient(270deg, #fac966 0, #ffe1ad);
  color: #6b512e;
  line-height: 32px;
  font-size: 18px;
  text-align: center;
}

.card-header {
  cursor: pointer;
  padding: 24px 30px;
  height: 180px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
//background-color: #3367d5;
}

.time {
  opacity: 0.6;
  font-size: 16px;
}

.name {
  margin-top: 7px;
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 32px;
}

.classname {
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 38px;
  font-size: 16px;
}

.qrcode {
  margin-top: 18px;
  display: flex;
  position: relative;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  text-align: left;
  color: #fff;
  line-height: 16px;
}

.qrcode img {
  display: block;
  width: 16px;
  margin-right: 8px;
}

.qrcode span {
  font-size: 18px;
}

.card-content {
  cursor: pointer;
  height: 70px;
  padding: 0 20px 16px 20px;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 8px 14px 12px;
  font-size: 12px;
  line-height: 16px;
  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
  font-weight: 400;
  text-align: left;
  color: #3c4043;
}

.left {
  display: flex;
  align-items: center;
}

.role {
  background-color: #fff;
  border: 1px solid #4285f4;
  color: #4285f4;
  min-width: 30px;
  max-width: 50px;
  height: 30px;
  line-height: 26px;
  display: inline-block;
  border-radius: 2px;
  font-size: 16px;
  text-align: center;
  margin-right: 8px;
}

.res-person {
  font-size: 18px;
  cursor: pointer;

}

.right {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium, sans-serif;
  font-weight: 500;
  color: black;
}

.set-top {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.set-top img {
  display: block;
  width: 17px;
  margin-right: 4px;
}

.three-point {
  cursor: pointer;
  margin-left: 11px;
}

.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}


::v-deep .el-dropdown-menu__item {
  font-size: 18px;
}
</style>